<template>
  <div class="scroll-wrapper" ref="refScroll" @scroll="hScroll">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :title="item.title"
          @click="$router.push('/article/' + item.art_id)"
        >
          <div slot="label">
            <van-grid
              v-if="item.cover.images"
              :column-num="item.cover.images.length"
            >
              <van-grid-item
                v-for="(imgSrc, idx) in item.cover.images"
                :key="idx"
              >
                <van-image :src="imgSrc" lazy-load></van-image>
              </van-grid-item>
            </van-grid>
            <!-- 文字区域 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relativeTime }}</span>
              <span
                @click.stop="hActionMore(item.art_id)"
                class="close"
                v-if="$store.state.tokenInfo.token"
              >
                <van-icon name="cross"> </van-icon>
              </span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="isShowMoreAction" :style="{ width: '80%' }"
      ><more-action
        ref="moreAction"
        @report="hReport"
        @un-like="hUnlike"
      ></more-action>
    </van-popup>
    <!-- <p v-for="i in 50" :key="i">{{ i }}</p> -->
  </div>
</template>

<script>
// 导入接口
import MoreAction from './moreAction.vue'
import { getArticles, unLike, report } from '../../api/article'
// 封装方法
// import {unLike} from '../../api/article'
export default {
  name: 'articleList',
  props: ['channel'],
  data () {
    return {
      list: [], // 数据项
      refreshing: false, // 是否正在下拉刷新
      loading: false, // 是否正常加载
      finished: false, // 是否所有的数据全部加载完成
      tiemstamp: Date.now(),
      articleId: null,
      isShowMoreAction: false // 初始不显示弹层
    }
  },
  components: { MoreAction },
  // 在articleList.vue组建中当进入页面是=时，由于不满一屏，所以van-list会自动调用onload方法
  // 因此我们可以直接在onload方法去调用getAritcles来加载数据
  methods: {
    async onLoad () {
      const res = await getArticles(this.channel.id, this.tiemstamp)
      //  获取的数据
      const arr = res.data.data.results // 他是一个数组
      // 对数组 进行展开
      this.list.push(...arr)
      // 更新时间戳
      this.tiemstamp = res.data.data.pre_timestamp
      // 把loading设置为false
      this.loading = false
      // 判断是否所有的数组加载完成，如果是finished设为true
      if (arr.length === 0) {
        // 说明就取不到数据了
        this.finished = true
      }
      // 页面上提示一下用户
      // this.$toast.success('成功加载数据')
    },
    // 下拉刷新，去获取最新的数据，增加到列表中
    async onRefresh () {
      // Date.now():请求新的推荐数据传当前的时间戳
      const res = await getArticles(this.channel.id, Date.now())
      //  获取的数据
      const arr = res.data.data.results
      // 对数组 进行展开
      this.list.unshift(...arr)
      // 设置为false
      this.refreshing = false
      // 页面上提示一下用户
      this.$toast.success('成功加载数据')
    },
    hActionMore (id) {
      // 显示弹层
      this.isShowMoreAction = true
      // 保存id
      this.articleId = id
      // 用ref获取子组件的引用，然后通过引用来修改子组件中的数据
      console.log(Date.now(), '通过this.$refs来访问子组件', this.$refs.moreAction)
      // 由于第一次打开弹出层时，子组件并没有被创建出来，所以这里要先判断
      if (this.$refs.moreAction) {
        this.$refs.moreAction.isReport = false
      }
    },
    async hUnlike () {
      console.log('触发事件用户不感兴趣')
      try {
        await unLike(this.articleId)
        // 删除文章
        this.delArticle(this.articleId)
        this.$toast.success('操作成功')
        // 关闭弹层
        this.isShowMoreAction = false
      } catch (err) {
        console.log(err)
        this.$toast.fail('操作失败')
      }
    },
    delArticle (articleId) {
      // 找到文章
      console.log('删除文章：根据文章的编号在list中删除', articleId)
      // 1. 查找(findIndex)：在list中找到 编号=== articleId的那个文章
      //   findIndex，如果有找到，则返回值就是下标；如果找不到返回-1
      const idx = this.list.findIndex(item => {
        if (item.art_id === articleId) {
          return true
        }
      })
      // 删除
      // 如果没有找到就返回值是下标，找不到就是-1
      if (idx !== -1) {
        // splice(删除)
        // 数组.splice(下标，要删除的个数)
        this.list.splice(idx, 1)
      }
    },
    async hReport (reportTypeId) {
      console.log('收到的举报类型是', reportTypeId)
      // 发举报请求
      try {
        await report(this.articleId, reportTypeId)
        this.$toast.success('举报成功')
        // 根据文章的编号在list中删除
        this.delArticle(this.articleId)
        // 关闭弹层
        this.isShowMoreAction = false
      } catch (err) {
        console.log(err)
        console.log('举报失败')
      }
    },
    hScroll () {
      // 保存一下
      console.log(this.$refs.refScroll.scrollTop)
      // 对象普通的属性，不是响应式的数据
      this.scrollTop = this.$refs.refScroll.scrollTop
    }

  },
  activated () {
    console.log('activated')
    if (this.scrollTop) {
      this.$refs.refScroll.scrollTop = this.scrollTop
    }
  }
}
</script>

<style scoped lang='less'>
.meta {
  span {
    margin-right: 10px;
  }
  display: flex;
  // 让它在最右边
  .close {
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
